<!-- 定期排查 -->
<template>
	<view class="all-shoot-container">
		<view class="top-content">
			<view class="view-tabs">
				<uni-data-checkbox mode="tag" v-model="queryForm.pageStatus" :localdata="tabs"></uni-data-checkbox>
			</view>

			<uni-nav-bar>
				<block slot="left">

				</block>

				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
					<input confirm-type="search" v-model="queryForm.taskName" class="nav-bar-input" type="text"
						placeholder="请输入任务名称" @confirm="confirm" />
				</view>

				<block slot="right">
					<view class="city" @click="searchBtn">
						搜索
					</view>
				</block>
			</uni-nav-bar>

			<view class="add-btn" v-if="queryForm.pageStatus == 1">
				<view class="middle-font" @click="goto(`/pages/trouble/otherViews/shoot`)">
					<uni-icons type="plusempty" size="25"></uni-icons>
					<text class="label">新增排查 </text>
				</view>
			</view>

			<!-- <view class="selects"> -->

			<!-- 			<view class="example-body">
					<uni-combox :border="false" :candidates="candidates" placeholder="请选择状态"></uni-combox>
				</view>

				<view class="example-body">
					<uni-combox :border="false" :candidates="candidates" placeholder="请选择所在城市"></uni-combox>
				</view>

				<view class="example-body">
					<uni-combox :border="false" :candidates="candidates" placeholder="请选择所在城市"></uni-combox>
				</view> -->
			<!-- </view> -->

		</view>


		<view class="check">
			<z-paging ref="paging" v-model="checkList"
				:style="{'top': queryForm.pageStatus == 1 ? '580rpx' : '400rpx' }" @query="queryList">
				<uni-card title="" extra="" v-for="(item, index) in checkList" :key="item.id">
					<uni-list>
						<uni-list-item title="序号" :rightText="`${index + 1}`" />
						<uni-list-item title="任务编号" :rightText="item.taskNumber" />
						<uni-list-item title="所属检查计划" :rightText="item.planName" />
						<uni-list-item title="排查任务名称" :rightText="item.taskName" />
						<uni-list-item title="检查执行人" :rightText="item.examineExecutorName" />
						<uni-list-item title="检查时间" :rightText="item.taskTime" />
						<template v-if="isShow">
							<uni-list-item title="检查参与人" :rightText="item.examineParticipantNames" />
							<uni-list-item title="检查时间" :rightText="item.taskTime" />
							<uni-list-item title="被检查单位" :rightText="item.passReviewUnitName" />

							<uni-list-item title="状态">
								<template v-slot:footer>
									<text class="custom-font">{{formatTaskStatus(item.taskStatus)}}</text>
								</template>
							</uni-list-item>
							<uni-list-item title="待处理人" :rightText="item.personToBeDone" />
							<uni-list-item title="操作">
								<template v-slot:footer>
									<button type="primary" size="mini" v-if="item.permissionState != 2"
										@click="handleInitiate(item)">{{ statusForButton(item.taskStatus) }}</button>

								</template>
							</uni-list-item>
						</template>

						<uni-list-item clickable @click="isShowContent(item)">
							<!-- :extra-icon="extraIcon" showExtraIcon -->
							<template v-slot:footer>
								<view>{{isShow ? '收起' : '展开更多'}}</view>
								<uni-icons type="up" size="18"></uni-icons>
							</template>
						</uni-list-item>
					</uni-list>
					<!-- <template v-if="item.id ==1">
						<button type="primary" @click="
					  goto(`/pages/trouble/otherViews/shoot`)
					">填写</button>
					</template>
					<template v-if="item.id ==2">
						<button type="primary" @click="
					  goto(`/pages/trouble/otherViews/shoot`)
					">填写</button>
					</template> -->

				</uni-card>
			</z-paging>
		</view>

	</view>
</template>

<script>
	import {
		listAllShoot,
		addAllShoot,
		editAllShoot,
		deleteAllShoot,
		detailAllShoot,
		submitAllShoot
	} from "@/api/hiddenTrouble/allShoot.js";
	import {
		listRegular,
		detailAllRegular
	} from "@/api/hiddenTrouble/periodShoot.js";
	import {
		getCheckPlan
	} from "@/api/hiddenTrouble/checkPlan.js";
	export default {
		data() {
			return {
				index: 0,
				extraIcon: {
					color: '#d5ded3',
					size: '22',
					type: 'bottom'
				},
				isShow: false,
				options: [{
						label: '所属检查计划',
						value: '所属检查计划',
					},
					{
						label: '检查时间',
						value: '检查时间',
					},
					{
						label: '检查执行人',
						value: '检查执行人',
					},
				],
				candidates: ['北京', '南京', '东京'],
				totalObj: {},
				//搜索参数
				queryForm: {
					pageNum: 1,
					pageSize: 10,
					pageStatus: 1
				},
				//搜索词
				testValue: '',
				tabs: [{
						text: '我制定的',
						value: 1
					},
					{
						text: '我参与的',
						value: 2
					},
					{
						text: '我审批的',
						value: 3
					},
					{
						text: '我签收的',
						value: 4
					},
				],
				checkList: []
			}
		},
		methods: {
			//种类的change事件
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail)
				this.index = e.detail.value

			},
			//是否展示内容
			isShowContent(item) {
				console.log("出发了", item)
				this.isShow = !this.isShow
				this.extraIcon.type = this.isShow ? "top" : "bottom"
			},
			/**  发起按钮*/
			async handleInitiate(row) {
				let query = {
					id: row.id,
					pageStatus: this.queryForm.pageStatus,
				};
				let res = await detailAllRegular(query)
				this.totalObj = res.data;

				if (row.taskStatus == 1) {
					uni.navigateTo({
						url: `/pages/trouble/otherViews/shoot`,
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('acceptDataFromOpenedPage', {
								totalObj: this.totalObj,
								operateStatus: 1,
								taskStatus: row.taskStatus,
								checkId: row.id
							})
						}
					})
				} else if (row.taskStatus == 2) { //填写
					uni.navigateTo({
						url: `/pages/trouble/process/fillIn`,
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('acceptDataFromOpenedPage', {
								totalObj: this.totalObj,
								operateStatus: 1,
								taskStatus: row.taskStatus,
								checkId: row.id
							})
						}
					})
				} else if (row.taskStatus == 3) { //汇总
					uni.navigateTo({
						url: `/pages/trouble/process/summary`,
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('acceptDataFromOpenedPage3', {
								totalObj: this.totalObj,
								operateStatus: 1,
								taskStatus: row.taskStatus,
								checkId: row.id
							})
						}
					})

				} else if (row.taskStatus == 4) { //审批
					uni.navigateTo({
						url: `/pages/trouble/process/examine`,
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('acceptDataFromOpenedPage', {
								totalObj: this.totalObj,
								operateStatus: 1,
								taskStatus: row.taskStatus,
								checkId: row.id
							})
						}
					})
				} else if (row.taskStatus == 5) { //签收
					uni.navigateTo({
						url: `/pages/trouble/process/sign`,
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('acceptDataFromOpenedPage', {
								totalObj: this.totalObj,
								operateStatus: 1,
								taskStatus: row.taskStatus,
								checkId: row.id
							})
						}
					})
				}
			},
			/** 根据状态展示文字 */
			statusForButton(val) {
				if (val == 1) {
					return "发起";
				} else if (val == 2) {
					return "填写";
				} else if (val == 3) {
					return "汇总";
				} else if (val == 4) {
					return "审批";
				} else if (val == 5) {
					return "签收";
				} else {
					return "";
				}
			},
			//格式化状态
			formatTaskStatus(val) {
				if (val == 1) {
					return "未开始";
				} else if (val == 2) {
					return "填写中";
				} else if (val == 3) {
					return "汇总中";
				} else if (val == 4) {
					return "审批中";
				} else if (val == 5) {
					return "签收中";
				} else if (val == 1001) {
					return "完成";
				}
			},
			goto(url) {
				console.log("url==", url)
				uni.navigateTo({
					url: url,
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenedPage', {
							pageStatus: this.queryForm.pageStatus,
							operateStatus: 2, //新增
						})
					}
				});
			},
			//分页方法
			async queryList(pageNum, pageSize) {
				// console.log("分页", pageNum, pageSize)
				this.queryForm.pageNum = pageNum
				this.queryForm.pageSize = pageSize
				const res = await listRegular(this.queryForm);
				// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				this.$refs.paging.complete(res.rows);
				// this.checkList = res.rows;
			},
			//查询--我制定的
			async searchBtn() {
				uni.showLoading({
					title: '加载中'
				})
				const res = await listRegular(this.queryForm);
				this.checkList = res.rows;
				uni.hideLoading()

			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			}
		},
		mounted() {
			this.searchBtn()
		},
		watch: {
			"queryForm.pageStatus"(val) {
				this.queryForm.pageNum = 1 /*  */
				this.queryForm.pageStatus = val
				this.searchBtn()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all-shoot-container {
		$nav-height: 30px;
		padding: 24rpx;
		padding-top: 240rpx;
		background: linear-gradient(180deg, #bbd9fe 0%, rgba(202, 231, 255, 0) 100%);

		// background: linear-gradient(180deg, #B8D7FF 0%, rgba(202, 231, 255, 0.4) 100%);
		.top-content {
			position: relative;
			z-index: 11;
			.view-tabs{
				::v-deep{
					.is--tag{
						margin-right: 16rpx;
					}
				}
			}
		}

		.check {
			.custom-font {
				color: #999;
				font-size: 22rpx;
			}

			.z-paging-content-fixed {
				// top: 640rpx;
				top: 400rpx;
			}
		}

		::v-deep {
			.uni-navbar {
				.uni-navbar--border {
					background-color: transparent !important;
					border-bottom: none !important;

					.uni-navbar__header {
						background-color: transparent !important;

						.uni-navbar__header-btns-left {
							width: 0 !important;
						}

						.uni-navbar__header-btns-right {
							.city {
								color: #137EE9;
								font-size: 18px;
								font-weight: 400;
							}
						}
					}
				}
			}

			.selects {
				display: flex;

				.example-body {
					.uni-combox {
						.uni-input-wrapper {
							.uni-input-input {
								text-align: right;
							}
						}
					}
				}
			}

			.add-btn {
				width: 100%;
				height: 175rpx;
				border: 2rpx dashed #C5C8CE;

				.middle-font {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;

					.label {
						color: #808695;
					}
				}
			}

			.uni-card {
				.uni-card__header {
					border: none;
				}

				.uni-card__content {
					.uni-group__content {
						padding: 0;
					}

				}
			}
		}

		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
		}

		.input-uni-icon {
			line-height: $nav-height;
		}

		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}
	}
</style>